<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      
      <div style="font-size: 15px;margin-bottom: 10px;">
        <span style="color: blue;">业务员{{salesmanName}}</span>所对接的供应商：
      </div>
      <s-table
        ref="table"
        size="default"
        :rowKey="(record,index)=>{return index}"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="avatar" slot-scope="text, record">
          <a-avatar :src="record.avatar" :size="54"/>
        </span>
        <span slot="username" slot-scope="text, record">
          <!-- <a-avatar :src="record.avatar" :size="54" style="margin-bottom:5px"/> -->
          <div>{{record.username}}</div>
          <div>{{record.password}}</div>
          <!-- <div>{{record.stu_id}}</div> -->
        </span>
        <span slot="yypic" slot-scope="text, record">
          <a-avatar :src="record.yypic" :size="54"/>
        </span>
        <span slot="name" slot-scope="text, record">
          <span style="text-decoration: underline;cursor:pointer" @click="showYWYList(record)">{{record.name}}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-action:release_edit2 @click="toGoodsView(record)">查看单商品售卖总金额</a>
          </template>
        </span>
      </s-table>

      <create-form
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
      <!-- <step-by-step-modal ref="modal" @ok="handleOk"/> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'

// import StepByStepModal from './modules/StepByStepModal'
import CreateForm from './modules/CreateForm'

const columns = [
  {
    title: '编号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    align: 'center',
    scopedSlots: { customRender: 'avatar' }
  },
  {
    title: '联系人',
    dataIndex: 'lian',
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '地址',
    dataIndex: 'area'
  },
  {
    title: '营业执照',
    dataIndex: 'yypic',
    scopedSlots: { customRender: 'yypic' }
  },
  {
    title: '营业时间',
    dataIndex: 'cTime'
  },
  {
    title: '预约时间',
    dataIndex: 'yTIme'
  },
  {
    title: '添加商品的数量',
    dataIndex: 'add_goods_num',
  },
  {
    title: '销量',
    dataIndex: 'selled_num'
  },
  {
    title: '核销量',
    dataIndex: 'checked_num'
  },
  {
    title: '核销总金额',
    dataIndex: 'checked_total_money'
  },
  {
    title: '操作',
    dataIndex: '',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  }
]
const merchant = {
  'data': [
    {
      user_id:3,
      name: '张三',
      lian: '里斯',
      avatar: '',
      mobile: 19142644397,
      area: '江西，南昌',
      startTime: '2016-05-11',
      yypic:'',
      cTime: '9.00 - 6.20',
      yTIme: '9.30 - 4.00',
      add_goods_num: 13,
      selled_num: 140, // 销量
      checked_num:100, //核销量
      checked_total_money:5000 //核销总金额
    },
  ],
  'pageSize': 10,
  'pageNo': 1,
  'totalPage': 6,
  'totalCount': 2
}

export default {
  name: 'yzusupplier',
  components: {
    STable,
    CreateForm
  },
  data () {
    
    this.columns = columns
    return {
      salesmanList:[{key:1,label:'业务员1'},{key:2,label:'业务员2'},{key:3,label:'业务员3'}],
      visibles: false,
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam, {teacher: 1, volunteer: 1})
        console.log('loadData request parameters:', requestParameters)
        return new Promise((res, rej) => {
          res()
        }).then(res => {
          return merchant
        })
        // return getMember(requestParameters)
        //   .then(res => {
        //     return new Promise((res, rej) => {
        //       res()
        //     }).then(res => {
        //       return merchant
        //     })
        //   })
      },
      selectedRowKeys: [],
      selectedRows: [],
      salesmanName:''
    }
  },
  created() {
    this.salesmanName = this.$route.query.name
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  mounted() {
  },
  methods: {
    handleChange3Salesman(val) {
      console.log("val",val)
      console.log("this.queryParam.salesman",this.queryParam.salesman)
      // this.queryParam.salesman = this.salesmanList[this.$route.query.user_id-1].label
    },
    // 成为老师
    changeTeacher(record) {
      addMember(record).then(res => {
        this.$refs.table.refresh()
      })
    },
    // 成为志愿者
    changeVolun(record) {
      record.volunteer = 2
      addMember(record).then(res => {
        this.$refs.table.refresh()
      })
    },
    toGoodsView(record) {
      this.$router.push({
        path:`/yzuperson/yun/index`,
        query:{ 
          provider_id:record.user_id,
          provider_name:record.name
        }
      })
    },
    showYWYList(record) {
      //alert('待开发')
      this.$router.push({
        path:`/yzumerchant/supplier/supplierinfo`,
        query:{
          key:record.user_id,
          name:record.salesname
        }
      })
    },
    // 查看详情
    open(e) {
      this.item = e
      console.log('------------------', e)
      // this.visibles = true
      this.$router.push('/yzuorder/orderList/index')
    },
      // 搜素模糊查询
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handleAdd () {
      this.mdl = null
      this.visible = true
    },
    handleEdit (record) {
      this.visible = true
      this.mdl = { ...record }
    },
    // 创建
    handleOk () {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            new Promise((resolve, reject) => {
              // addMember(values).then(res => {
              //   if( res ) {
              //     resolve()
              //   } else {
              //     this.confirmLoading = false
              //   }
              // })
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('修改成功')
            }).catch(error => {
              this.$message.info('该用户名已存在')
              this.confirmLoading = false
            })
          } else {
            // 新增
            new Promise((resolve, reject) => {
              // addMember(values).then(value => {
              //   if( value ) {
              //     resolve()
              //   } else {
              //     this.confirmLoading = false
              //   }
              // })
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              // 重置表单数据
              form.resetFields()
              // 刷新表格
              this.$refs.table.refresh()

              this.$message.success('新增成功')
            })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
     // 删除
    confirm(e) {
      const form = this.$refs.createModal.form
      console.log(e);
      // delMember({id: e.id}).then(res => {
      //   // 重置表单数据
      //   form.resetFields()
      //   // 刷新表格
      //   this.$refs.table.refresh()
      //   this.$message.success('删除成功');
      // }).catch(error => {
      //   console.log('-------------error------------', error)
      // })
    },
    cancel(e) {
      console.log(e);
      this.$message.error('已取消');
    },
    handleCancel () {
      this.visible = false

      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    resetSearchForm () {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    // 重置
    reset () {
      const form = this.$refs.createModal.form
      this.queryParam = {}
        // 重置表单数据
      form.resetFields()
      // 刷新表格
      this.$refs.table.refresh()
    },
  },
}
</script>
<style scoped>
/* 文字溢出隐藏并显示省略号 */
.textfont{
  width: 200px;
  height: 40px;
  /* height: 100%; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp:2; /* 设置行数 */
	-webkit-box-orient:vertical;
}
</style>
